<template>
	<view class="" :style="[AppSkinVar]">
		<view class="h-100 e-m-b-30"></view>
		<view class="e-flex tab-list bg-white">
			<view class="e-flex-1 e-rela h-100 e-flex-xy-center" @tap="handleTabChange(1)">
				{{ $t('advanceShare.券码中心') }}
				<view class="line" :style="{ background: AppSkin.primary }" v-if="currentIndex === 1"></view>
			</view>
			<view class="e-flex-1 e-rela h-100 e-flex-xy-center" @tap="handleTabChange(2)">
				{{ $t('advanceShare.商品券码') }}
				<view class="line" :style="{ background: AppSkin.primary }" v-if="currentIndex === 2"></view>
			</view>
		</view>
		<view class="e-p-l-20 e-p-r-20" v-show="currentIndex === 1">
			<view class="item-box bg-white e-m-b-20 e-p-t-42 e-p-l-30 e-p-r-30 e-p-b-20" v-for="item in systemList" :key="item.id">
				<view class="e-flex e-m-b-40">
					<view class="circle-box e-flex-xy-center" :style="{ background: AppSkin.gradientPrimary }">
						<image class="img-28" :src="`./static/${item.icon}`" mode=""></image>
					</view>
					<view class="e-m-l-16 c-333 e-font-32 fw-600">
						{{ $t(item.name) }}
					</view>
				</view>
				<view class="coupon-box e-m-b-20">
					<view class="e-flex" @tap="jumpSelectCoupon({ type: 1 })">
						<text class="c-b3 e-line-1" :class="{ 'c-34': item.couponName }">{{ item.couponName || $t('advanceShare.请选择优惠券') }}</text>
						<image class="img-36 e-m-l-10" src="./static/bottom_arrow.png" mode=""></image>
					</view>
				</view>
				<view class="e-flex e-font-28 e-m-b-20" v-if="itemshareUrl">
					<view class="e-flex-1 e-m-r-18 h-100 border-bottom e-p-30">
						<text class="c-b3 e-line-1" :class="{ 'c-34': item.shareUrl }">{{ item.shareUrl || $t('advanceShare.券码链接') }}</text>
					</view>
					<view class="width-100 h-100 border-bottom e-p-30">
						<text class="c-b3 e-line-1" :class="{ 'c-34': item.couponShareCode }">{{ item.couponShareCode || $t('advanceShare.券码') }}</text>
					</view>
				</view>
				<view class="e-flex e-font-28" v-if="item.shareUrl || item.couponShareCode">
					<view class="e-flex e-flex-1" v-if="item.shareUrl">
						<view class="e-flex-1 e-m-r-20 copy-box e-flex-xy-center" @tap="hanldeCopeLink(item.shareUrl)">
							<view class="" :style="{ color: AppSkin.primary }">
								<text class="iconfont icon-bianzu e-m-r-12 e-font-26"></text>
								<text>{{ $t('advanceShare.复制券码链接') }}</text>
							</view>
						</view>
						<view class="e-flex-1 copy-box e-flex-xy-center" @tap="hanldeCopeCode(item.couponShareCode)">
							<view class="" :style="{ color: AppSkin.primary }">
								<text class="iconfont icon-bianzu1 e-m-r-12 e-font-26"></text>
								<text>{{ $t('advanceShare.仅复制券码') }}</text>
							</view>
						</view>
					</view>
					<view class="copy-box e-flex-xy-center e-flex-1" v-else @tap="$goTo('/pages/advanceShare/list', { couponId: item.couponId })">
						<text :style="{ color: AppSkin.primary }">{{ $t('advanceShare.查看券码和链接') }}</text>
					</view>
				</view>
				<view class="copy-box e-flex-xy-center" v-else @tap="jumpSelectCoupon({ type: 1 })">
					<text :style="{ color: AppSkin.primary }">{{ $t('advanceShare.生成券码和链接') }}</text>
				</view>
			</view>
		</view>
		<view class="e-p-l-20 e-p-r-20" v-show="currentIndex === 2">
			<view class="search-box e-flex e-p-l-30 e-p-r-30 e-m-b-30">
				<text class="iconfont icon-sousuo e-m-r-24" style="color: #989898"></text>
				<e-input border="none" :placeholder="$t('advanceShare.请输入商品名称搜索')" v-model="keyword"></e-input>
			</view>
			<view class="item-box bg-white e-m-b-20 e-p-t-42 e-p-l-30 e-p-r-30 e-p-b-20" v-for="item in goodsList" :key="item.id">
				<view class="e-flex e-m-b-40">
					<view class="e-flex-xy-center" style="border-radius: 5px; overflow: hidden">
						<load-image :size="['84rpx']" :src="item.coverImg"></load-image>
					</view>
					<view class="e-m-l-16">
						<view class="c-333 e-font-32 fw-600 e-line-1 e-m-b-4">
							{{ item.name }}
						</view>
						<view class="e-font-28" style="color: #343434">{{ $unitEn }}{{ item.price }}</view>
					</view>
				</view>
				<view class="coupon-box e-m-b-20" @tap="jumpSelectCoupon({ type: 5, proId: item.id })">
					<view class="e-flex">
						<text class="c-b3 e-line-1" :class="{ 'c-34': item.couponName }">{{ item.couponName || $t('advanceShare.请选择优惠券') }}</text>
						<image class="img-36 e-m-l-10" src="./static/bottom_arrow.png" mode=""></image>
					</view>
				</view>
				<view class="e-flex e-font-28 e-m-b-20" v-if="item.shareUrl">
					<view class="e-flex-1 e-m-r-18 h-100 border-bottom e-p-30">
						<text class="c-b3 e-line-1" :class="{ 'c-34': item.shareUrl }">{{ item.shareUrl || $t('advanceShare.券码链接') }}</text>
					</view>
					<view class="width-100 h-100 border-bottom e-p-30">
						<text class="c-b3 e-line-1" :class="{ 'c-34': item.couponShareCode }">{{ item.couponShareCode || $t('advanceShare.券码') }}</text>
					</view>
				</view>
				<view class="e-flex e-font-28" v-if="item.shareUrl || item.couponId">
					<view class="e-flex e-flex-1" v-if="item.shareUrl">
						<view class="e-flex-1 e-m-r-20 copy-box e-flex-xy-center" @tap="hanldeCopeLink(item.shareUrl)">
							<view class="" :style="{ color: AppSkin.primary }">
								<text class="iconfont icon-bianzu e-m-r-12 e-font-26"></text>
								<text>{{ $t('advanceShare.复制券码链接') }}</text>
							</view>
						</view>
						<view class="e-flex-1 copy-box e-flex-xy-center" @tap="hanldeCopeCode(item.couponShareCode)">
							<view class="" :style="{ color: AppSkin.primary }">
								<text class="iconfont icon-bianzu1 e-m-r-12 e-font-26"></text>
								<text>{{ $t('advanceShare.仅复制券码') }}</text>
							</view>
						</view>
					</view>

					<view class="copy-box e-flex-xy-center e-flex-1" v-else @tap="$goTo('/pages/advanceShare/list', { couponId: item.couponId })">
						<text :style="{ color: AppSkin.primary }">{{ $t('advanceShare.查看券码和链接') }}</text>
					</view>
				</view>
				<view class="copy-box e-flex-xy-center" v-else @tap="jumpSelectCoupon({ type: 5, proId: item.id })">
					<text :style="{ color: AppSkin.primary }">{{ $t('advanceShare.生成券码和链接') }}</text>
				</view>
			</view>
		</view>
		<view class="h-100" style="width: 100vw"></view>
		<view class="footer-box e-flex-xy-center c-333 fw-600 e-font-32" @tap="$goTo('/pages/advanceShare/detail')">
			{{ $t('advanceShare.邀请明细') }}
		</view>

		<!-- 复制券码链接弹窗 -->
		<e-modal
			:show="showModal"
			:title="$t('advanceShare.复制券码链接')"
			:showCancelButton="true"
			:confirmColor="AppSkin.primary"
			:confirmText="$t('common.copy')"
			:cancelText="$t('common.取消')"
			@cancel="showModal = false"
			@confirm="hanldeConfirm"
		>
			<view class="slot-content">
				<view class="modal-box">
					{{ shareUrl }}
					<e-input v-model="shareCustom" border="none"></e-input>
				</view>
			</view>
		</e-modal>
		<!-- 复制券码弹窗 -->
		<e-modal
			:show="showModal1"
			:title="$t('advanceShare.复制券码')"
			:showCancelButton="true"
			:confirmColor="AppSkin.primary"
			:confirmText="$t('common.copy')"
			:cancelText="$t('common.取消')"
			@cancel="showModal1 = false"
			@confirm="hanldeConfirm1"
		>
			<view class="slot-content">
				<view class="modal-box">
					{{ couponShareCode }}
				</view>
			</view>
		</e-modal>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import { debounce } from '@/common/utils';
import { getCouponShareProductList } from '@/common/request/api';
import type { ShareCouponProductItem } from '@/common/request/api';
import { useInit } from '@/common/stores';
import { storeToRefs } from 'pinia';
import { useCurrentInstance } from '@/common/hooks';

const ctx = useCurrentInstance();
const { AppSkin } = storeToRefs(useInit());

const currentIndex = ref(0);
const handleTabChange = (index: number) => {
	currentIndex.value = index;
};

const showModal = ref(false);
const showModal1 = ref(false);
const systemList = reactive([
	{
		name: 'advanceShare.邀请注册券码分享',
		id: '1',
		icon: 'adv-1.png',
		couponName: '',
		couponId: '',
		shareUrl: '',
		couponShareCode: ''
	},
	{
		name: 'advanceShare.全平台优惠券码',
		id: '2',
		icon: 'adv-2.png',
		couponName: '',
		couponId: '',
		shareUrl: '',
		couponShareCode: ''
	},
	{
		name: 'advanceShare.分类优惠券码',
		id: '3',
		icon: 'adv-3.png',
		couponName: '',
		couponId: '',
		shareUrl: '',
		couponShareCode: ''
	},
	{
		name: 'advanceShare.分区优惠券码',
		id: '4',
		icon: 'adv-4.png',
		couponName: '',
		couponId: '',
		shareUrl: '',
		couponShareCode: ''
	}
]);
const keyword = ref('');
const goodsList = ref<ShareCouponProductItem[]>([]);

const getData = () => {
	const params = {
		proName: keyword.value
	};
	getCouponShareProductList(params).then((res) => {
		goodsList.value = res.data;
	});
};

const searchProduct = debounce(function () {
	getData();
}, 1000);

watch(keyword, () => {
	searchProduct();
});

const shareUrl = ref('');
const couponShareCode = ref('');
const shareCustom = ref(''); // 分享语，用户输入

const hanldeCopeLink = (code?: string) => {
	shareUrl.value = code || '';
	if (shareUrl.value) showModal.value = true;
};
const hanldeCopeCode = (code?: string) => {
	couponShareCode.value = code || '';
	if (couponShareCode.value) showModal1.value = true;
};
const hanldeConfirm = () => {
	const shareLink = shareUrl.value + '&shareCustom=' + shareCustom.value;
	ctx.$copy(shareLink);
	showModal.value = false;
};
const hanldeConfirm1 = () => {
	ctx.$copy(couponShareCode.value);
	showModal1.value = false;
};

getData();

const selectCoupon = (data: { proId: string; type: string; shareUrl: string; name: string; couponShareCode: string; couponId: string }) => {
	if (data) {
		if (data.type === '5') {
			const index = goodsList.value.findIndex((items) => items.id === data.proId);
			if (index > -1) {
				const item = goodsList.value[index];
				item.shareUrl = data.shareUrl;
				item.couponName = data.name;
				item.couponShareCode = data.couponShareCode;
				item.couponId = data.couponId || '';
				goodsList.value.splice(index, 1, item);
			}
		} else {
			const index = systemList.findIndex((items) => items.id === data.type);
			if (index > -1) {
				const item = systemList[index];
				item.shareUrl = data.shareUrl;
				item.couponName = data.name;
				item.couponShareCode = data.couponShareCode;
				item.couponId = data.couponId || '';
				systemList.splice(index, 1, item);
			}
		}
	}
};

const jumpSelectCoupon = (params:Record<string, any> ) => {
	ctx.$goTo('/pages/advanceShare/selectCoupon',params,{
		selectCoupon
	})
}
</script>

<style lang="scss" scoped>
@font-face {
	font-family: 'iconfont';
	/* Project id 3839120 */
	src: url('./static/font/iconfont.woff2?t=1687947615807') format('woff2'), url('./static/font/iconfont.woff?t=1687947615807') format('woff'),
		url('./static/font/iconfont.ttf?t=1687947615807') format('truetype');
}

.iconfont {
	font-family: 'iconfont' !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-bianzu:before {
	content: '\e62f';
}

.icon-bianzu1:before {
	content: '\e630';
}

.h-100 {
	height: 100rpx;
}

.tab-list {
	position: fixed;
	width: 100vw;
	height: 100rpx;
	left: 0;
	top: 44px;
	z-index: 999;

	.line {
		width: 48rpx;
		height: 6rpx;
		border-radius: 3rpx;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
}

.item-box {
	border-radius: 20rpx;
}

.circle-box {
	width: 48rpx;
	height: 48rpx;
	box-shadow: 0px 4rpx 8rpx 0px rgba(245, 34, 45, 0.2);
	border-radius: 50%;
}

.coupon-box {
	display: inline-block;
	border-radius: 50rpx;
	padding: 16rpx 30rpx;
	border: 2rpx solid #f2f2f2;
}

.width-100 {
	width: 208rpx;
}

.border-bottom {
	border-bottom: 2rpx solid #f2f2f2;
}

.c-b3 {
	color: #b3b3b3;
}

.c-34 {
	color: #343434 !important;
}

.copy-box {
	height: 80rpx;
}

.footer-box {
	width: 100vw;
	height: 100rpx;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	z-index: 999;
}

.modal-box {
	width: 528rpx;
	height: 300rpx;
	background: #ffffff;
	border-radius: 10rpx;
	border: 2rpx solid #e6e6e6;
	padding: 20rpx;
}

.search-box {
	height: 80rpx;
	background: #ffffff;
	border-radius: 50rpx;
}
</style>
